<?php
require('../model/conn.php');
require('./constrl/lookPage.php');
pdlook();
// 获取统计数据
$userCount = exec_select("SELECT COUNT(*) AS cnt FROM tbl_user");
$articleCount = exec_select("SELECT COUNT(*) AS cnt FROM tbl_article");
$boardCount = exec_select("SELECT COUNT(*) AS cnt FROM tbl_board");
$viewSum = exec_select("SELECT SUM(view_count) AS total FROM tbl_article");
// 获取每个板块的文章数量（用于绘制图表）
$boardStats = exec_select("
    SELECT b.board_name, COUNT(a.article_id) AS num 
    FROM tbl_board AS b 
    LEFT JOIN tbl_article AS a ON b.board_id = a.board_id 
    GROUP BY b.board_id
");
?>
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>说点吧 - 后台管理</title>
  <link rel="stylesheet" href="../style/css/bootstrap.min.css">
  <link rel="stylesheet" href="../style/css/adminIndex.css">
  <link rel="stylesheet" href="../style/css/font-face.css">
</head>


<body>
  <!-- 导航栏 -->
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <span class="navbar-brand">说点吧 后台管理</span>
      </div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="index.php">后台首页</a></li>
        <li><a href="user_manage.php">用户管理</a></li>
        <li><a href="user_upgrade.php">账户升级</a></li>
        <li><a href="board_manage.php">板块管理</a></li>
        <li><a href="article_manage.php">管理文章</a></li>
        <li>
          <?php
          if (isset($_SESSION['hdb']) && trim($_SESSION['hdb']) != '') {
            echo "<span> $_SESSION[hdb]</span><a href='view/adminOut.php'>退出管理</a>";
          }
          ?>
        </li>
      </ul>
    </div>
  </nav>

  <div class="container">
    <!-- 信息概览面板 -->
    <div class="row">
      <div class="col-md-3">
        <div class="panel panel-primary">
          <div class="panel-heading">用户总数</div>
          <div class="panel-body">
            <span class="glyphicon glyphicon-user"></span>
            <?php echo $userCount[0]['cnt']; ?> 人
          </div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="panel panel-success">
          <div class="panel-heading">文章总数</div>
          <div class="panel-body">
            <span class="glyphicon glyphicon-file"></span>
            <?php echo $articleCount[0]['cnt']; ?> 篇
          </div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="panel panel-info">
          <div class="panel-heading">板块总数</div>
          <div class="panel-body">
            <span class="glyphicon glyphicon-th-list"></span>
            <?php echo $boardCount[0]['cnt']; ?> 个
          </div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="panel panel-warning">
          <div class="panel-heading">总浏览量</div>
          <div class="panel-body">
            <span class="glyphicon glyphicon-eye-open"></span>
            <?php echo $viewSum[0]['total'] ? $viewSum[0]['total'] : 0; ?> 次
          </div>
        </div>
      </div>
    </div>

    <!-- 静态图表面板 -->
    <div class="row">
      <div class="col-md-12">
        <div class="panel panel-default">
          <div class="panel-heading">文章分类帖子数统计</div>
          <div class="panel-body">
            <canvas id="chartCanvas" width="600" height="300"></canvas>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 引入Chart.js库并绘制柱状图 -->
  <!-- <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> -->
  <script src="../style/js/chart.js"></script>
  <script>
    // 准备图表数据
    var labels = [];
    var values = [];
    <?php foreach ($boardStats as $bs) { ?>
      labels.push(<?php echo json_encode($bs['board_name']); ?>);
      values.push(<?php echo $bs['num']; ?>);
    <?php } ?>
    // 绘制柱状图
    var ctx = document.getElementById('chartCanvas').getContext('2d');
    var chart = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: labels,
        datasets: [{
          label: '帖子数',
          data: values,
          backgroundColor: [
            'rgba(255,99,132,0.5)',
            'rgba(54,162,235,0.5)',
            'rgba(255,206,86,0.5)',
            'rgba(75,192,192,0.5)',
            'rgba(153,102,255,0.5)',
            'rgba(255,159,64,0.5)'
          ],
          borderColor: [
            'rgba(255,99,132,1)',
            'rgba(54,162,235,1)',
            'rgba(255,206,86,1)',
            'rgba(75,192,192,1)',
            'rgba(153,102,255,1)',
            'rgba(255,159,64,1)'
          ],
          borderWidth: 1
        }]
      },
      options: {
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });
  </script>
</body>

</html>